<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .box {
        cursor: pointer;
      }
      .father {
        width: 400px;
        height: 300px;
        background-color: rgb(77, 168, 34);
      }
      .son {
        width: 200px;
        height: 100px;
        background-color: rgb(24, 97, 165);
      }
    </style>
  </head>
  <body>
    <div class="box">你点我一下试试</div>
    <div class="father">
      <div class="son"></div>
    </div>
    <form action="">
      <input type="text" name="user" />
      <input type="text" name="user1" />
      <input type="submit" />
    </form>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
  <script>
    //click（）		鼠标单击
    $(".box").click(function () {
      $(this).html("你点我两下试试").css("color", "pink");
    });
    //dblclick（）	鼠标双击
    $(".box").dblclick(function () {
      $(this).html("我错了").css("color", "purple");
    });
    //mouseover（）	鼠标进入（进入子元素也会触发）
    $(".box").mouseover(function () {
      $(this).css("fontSize", "28px");
    });
    //mouseout（）		鼠标离开（离开子元素也触发）
    $(".box").mouseout(function () {
      $(this).css("fontSize", "16px");
    });

    /*$(".box")  连缀写法
      .mouseover(function () {
        $(this).css("fontSize", "28px");
      })
      .mouseout(function () {
        $(this).css("fontSize", "16px");
      });*/

    $(".box").on("mouseover mouseout", function () {
      console.log("111"); //两个事件触发效果相同时 可将其捆绑(bind/on)来写
    });
    $(".box").one("mouseover mouseout", function () {
      console.log("111"); //只执行一次
    });
    //mouseenter（）	鼠标进入（进入子元素不触发）
    $(".father").mouseover(function () {
      console.log("father"); //mouseover在子元素中也会触发 会出现事件冒泡
    });
    $(".son").mouseover(function () {
      console.log("son");
    });
    $(".father").mouseenter(function () {
      console.log("father"); //mouseenter在子元素中不会触发  会阻止事件冒泡
    });
    $(".son").mouseenter(function () {
      console.log("son");
    });
    //mouseleave（）	鼠标离开（离开子元素不触发）
    //keydown（）		按下键盘键
    $("form input[name=user]").keydown(function (e) {
      //console.log(e); //可以传入参数e 通过e.keyCode获取按下键的code值
      if (e.keyCode == 13) {
        //回车 13  当按下回车键时执行以下代码
        console.log($(this).val());
      }
    });
    //keyup（）			松开键盘键
    //keypress（）		从键盘输入字符
    $("input[name=user1]").keypress(function (e) {
      console.log(e);
      if (e.charCode == 65) {
        //当输入大写字母A时
        console.log($(this).val());
      }
    });
    //blur（）		元素失去焦点
    $("input[name=user],input[name=user1]").blur(function () {
      var val = $(this).val();
      if (val.length < 2 || val.length > 8) {
        alert("您输入长度不对，应该输入2-8字符之间");
      }
    });
    //focus（）		元素获得焦点
    /*$("input[name=user],input[name=user1]").focus(function(){
        alert()
    })*/
    //submit（）		用户递交表单
    $("form").submit(function () {
      alert("已提交");
    });
    $("form input:submit").click(function () {
      //实现相同效果
      alert("已提交");
    });
    //hover（）		同时为mouseenter和mouseleave事件指定处理函数
    $(".box").hover(
      function () {
        $(this).css("backgroundColor", "blue");
      },
      function () {
        $(this).css("backgroundColor", "");
      }
    );
    $(".box") //实现与hover()相同功能
      .mouseenter(function () {
        $(this).css("backgroundColor", "blue");
      })
      .mouseleave(function () {
        $(this).css("backgroundColor", "");
      });
    //ready（）		DOM加载完成
    //resize（）		浏览器的窗口的大小发生改变
    $(window).resize(function () {
      alert("窗口大小改变");
    });
    //scroll（）		滚动条的位置发生变化
    $(window).scroll(function () {
      alert("滚动");
    });
  </script>
</html>
